<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      style="box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); min-height: 100vh; background: #F5F7FA; display: flex; flex-direction: column; gap: 24px; padding: 24px;"
    >
      <div
        class="ant-card ant-card-bordered"
      >
        <div
          class="ant-card-body"
        >
          <div
            class="ant-pro-page-container"
          >
            <div
              class="ant-page-header ant-pro-page-container-warp-page-header ant-page-header-has-breadcrumb ant-page-header-ghost"
            >
              <nav
                class="ant-breadcrumb ant-page-header-breadcrumb"
              >
                <ol>
                  <li>
                    <a
                      class="ant-breadcrumb-link"
                      href="#/"
                    >
                      Primary page
                    </a>
                  </li>
                  <li
                    aria-hidden="true"
                    class="ant-breadcrumb-separator"
                  >
                    /
                  </li>
                  <li>
                    <a
                      class="ant-breadcrumb-link"
                      href="#//"
                    >
                      Secondary page
                    </a>
                  </li>
                  <li
                    aria-hidden="true"
                    class="ant-breadcrumb-separator"
                  >
                    /
                  </li>
                  <li>
                    <a
                      class="ant-breadcrumb-link"
                      href="#///"
                    >
                      Current page
                    </a>
                  </li>
                </ol>
              </nav>
              <div
                class="ant-page-header-heading "
              >
                <div
                  class="ant-page-header-heading-left"
                >
                  <span
                    class="ant-page-header-heading-title"
                    title="Default loading"
                  >
                    Default loading
                  </span>
                </div>
              </div>
            </div>
            <div
              class="ant-pro-grid-content"
            >
              <div
                class="ant-pro-grid-content-children"
              >
                <div
                  style="padding-block-start: 100px; text-align: center;"
                >
                  <div
                    aria-busy="true"
                    aria-live="polite"
                    class="ant-spin ant-spin-lg ant-spin-spinning"
                  >
                    <span
                      class="ant-spin-dot-holder"
                    >
                      <span
                        class="ant-spin-dot ant-spin-dot-spin"
                      >
                        <i
                          class="ant-spin-dot-item"
                        />
                        <i
                          class="ant-spin-dot-item"
                        />
                        <i
                          class="ant-spin-dot-item"
                        />
                        <i
                          class="ant-spin-dot-item"
                        />
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-card ant-card-bordered"
      >
        <div
          class="ant-card-body"
        >
          <div
            class="ant-pro-page-container"
          >
            <div
              class="ant-page-header ant-pro-page-container-warp-page-header ant-page-header-has-breadcrumb ant-page-header-ghost"
            >
              <nav
                class="ant-breadcrumb ant-page-header-breadcrumb"
              >
                <ol>
                  <li>
                    <a
                      class="ant-breadcrumb-link"
                      href="#/"
                    >
                      Primary page
                    </a>
                  </li>
                  <li
                    aria-hidden="true"
                    class="ant-breadcrumb-separator"
                  >
                    /
                  </li>
                  <li>
                    <a
                      class="ant-breadcrumb-link"
                      href="#//"
                    >
                      Secondary page
                    </a>
                  </li>
                  <li
                    aria-hidden="true"
                    class="ant-breadcrumb-separator"
                  >
                    /
                  </li>
                  <li>
                    <a
                      class="ant-breadcrumb-link"
                      href="#///"
                    >
                      Current page
                    </a>
                  </li>
                </ol>
              </nav>
              <div
                class="ant-page-header-heading "
              >
                <div
                  class="ant-page-header-heading-left"
                >
                  <span
                    class="ant-page-header-heading-title"
                    title="Custom loading property"
                  >
                    Custom loading property
                  </span>
                </div>
              </div>
            </div>
            <div
              class="ant-pro-grid-content"
            >
              <div
                class="ant-pro-grid-content-children"
              >
                <div
                  style="padding-block-start: 100px; text-align: center;"
                >
                  <div
                    aria-busy="true"
                    aria-live="polite"
                    class="ant-spin ant-spin-lg ant-spin-spinning ant-spin-show-text customClassName"
                  >
                    <span
                      class="ant-spin-dot-holder"
                    >
                      <span
                        class="ant-spin-dot ant-spin-dot-spin"
                      >
                        <i
                          class="ant-spin-dot-item"
                        />
                        <i
                          class="ant-spin-dot-item"
                        />
                        <i
                          class="ant-spin-dot-item"
                        />
                        <i
                          class="ant-spin-dot-item"
                        />
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-card ant-card-bordered"
      >
        <div
          class="ant-card-body"
        >
          <div
            class="ant-pro-page-container"
          >
            <div
              class="ant-page-header ant-pro-page-container-warp-page-header ant-page-header-has-breadcrumb ant-page-header-ghost"
            >
              <nav
                class="ant-breadcrumb ant-page-header-breadcrumb"
              >
                <ol>
                  <li>
                    <a
                      class="ant-breadcrumb-link"
                      href="#/"
                    >
                      Primary page
                    </a>
                  </li>
                  <li
                    aria-hidden="true"
                    class="ant-breadcrumb-separator"
                  >
                    /
                  </li>
                  <li>
                    <a
                      class="ant-breadcrumb-link"
                      href="#//"
                    >
                      Secondary page
                    </a>
                  </li>
                  <li
                    aria-hidden="true"
                    class="ant-breadcrumb-separator"
                  >
                    /
                  </li>
                  <li>
                    <a
                      class="ant-breadcrumb-link"
                      href="#///"
                    >
                      Current page
                    </a>
                  </li>
                </ol>
              </nav>
              <div
                class="ant-page-header-heading "
              >
                <div
                  class="ant-page-header-heading-left"
                >
                  <span
                    class="ant-page-header-heading-title"
                    title="Custom loading, display content after 3 seconds"
                  >
                    Custom loading, display content after 3 seconds
                  </span>
                </div>
              </div>
            </div>
            <div
              class="ant-pro-grid-content"
            >
              <div
                class="ant-pro-grid-content-children"
              >
                <div
                  style="color: red; padding: 30px; text-align: center;"
                >
                  Custom loading...
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>